<template>
    <div>
        <el-card class="article-select">
            <!--面包屑导航-->
            <div slot="header" class="clearfix">
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                    <el-breadcrumb-item>粉丝管理</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <!--标签页-->
            <el-tabs v-model="activeName" type="card">

                <!--粉丝列表-->
                <el-tab-pane label="粉丝列表" name="1">
                    <fansMember :fansData="fansData"></fansMember>
                </el-tab-pane>
                <!--数据图表1-->
                <el-tab-pane label="粉丝图表数据" name="2">
                    <fansChart1></fansChart1>
                </el-tab-pane>
                <!--数据图表2-->
                <el-tab-pane label="粉丝图表数据2" name="3">
                    <fansChart2></fansChart2>
                </el-tab-pane>

            </el-tabs>


        </el-card>
    </div>
</template>

<script>
    import fansMember from './components/fans-member'
    import fansChart1 from './components/fans-chart1'
    import fansChart2 from './components/fans-chart2'

    export default {
        name: "fans",
        data() {
            return {
                activeName: '1',
                fansData:[],
            }
        },
        components:{fansMember, fansChart1, fansChart2},
        created() {
          this.fansData = this.$store.state.fansData
        },
        methods: {}
    }
</script>

<style scoped lang="scss">
    .article-select{
        user-select: none;
    }

</style>
